{% extends 'music_base.html' %}
{% load static %}

{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;

        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }

    .my_button {
            {
            #background-color: red;
            /* Green */
            #
        }

        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }

    .my_button1 {
        background-color: white;
        color: black;
        border: 2px solid red;
        font-size: 15px;
    }

    .my_button1:hover {
        background-color: red;
        color: white;
    }

    .my_button2 {
        background-color: white;
        color: black;
        border: 2px solid deepskyblue;
        font-size: 15px;
    }

    .my_button2:hover {
        background-color: deepskyblue;
        color: white;
    }
</style>
{% endblock %}

{% block body %}
<div class="profile-container">
    <h1>{{ username }}的收藏</h1>
    <div>
        <div>音乐信息</div>
        <table>
            <thead>
                <tr>
                    <th class="text-center">名称</th>
                    <th class="text-center">浏览量</th>
                    <th class="text-center">图片</th>
                    <th class="text-center">播放</th>
                    <th class="text-center">查看详情</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for like in likes %}
                <tr>
                    <td style="width:50px ">{{ like.music.music_name }}</td>
                    <td>{{ like.music.play_count }}</td>
                    <td>
                        <img src="{{ like.music.cover_image.url }}" alt="" style="width: 120px;height: 90px">
                    </td>
                    <td>
                        <audio controls>
                            <source src="{{ like.music.music_file.url }}" type="audio/mpeg">
                            您的浏览器不支持音频元素。
                        </audio>
                    </td>
                    <td>
                        <a href="/music/detail/{{ like.music.id }}">
                            <button class="btn-sm btn my_button2">查看详情</button>
                        </a>
                    </td>
                    <td>
                        <button like-id="{{ like.id }}" class="btn-sm btn my_button1">取消收藏</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
    var MyLike = function () {
    };

    MyLike.prototype.listenDeleteEvent = function () {
        $(".delete-like-btn").on("click", function (event) {
            event.preventDefault();
            var $this = $(this);
            var like_id = $this.attr('like-id');
            $.ajax({
                url: "/music/like/delete/",
                type: 'POST',
                data: {
                    like_id
                },
                success: function (result) {
                    if (result['code'] === 200) {
                        alert('取消成功');
                        location.reload()
                    } else {
                        alert(result['message']);
                    }
                }
            })
        });
    };


    MyLike.prototype.run = function () {
        this.listenDeleteEvent();
    };


    $(function () {
        var handler = new MyLike();
        handler.run();
    });
</script>
{% endblock %}